<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>西药处方打印(竖)</title>
    <style>
      @media print {
        html,
        body {
          margin: 0;
          padding: 3mm;
          font-size: 0.5mm;
        }

        * {
          box-sizing: border-box;
        }

        @page {
          size: A5 portrait;
          margin: 0mm;
        }

        .img {
          display: block;
        }

        .rightImg {
          display: inline-block;
          line-height: 1;
        }

        #app {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        #app .box {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
        }

        .nr {
          height: 125mm;
          border-top: 0.1mm solid #000;
          border-bottom: 0.1mm solid #000;
        }

        .footer {
          page-break-after: always;
        }

        .hid {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
        }
      }
    </style>
  </head>

  <body>
    <section id="app">
      <div v-for="(item,index) in list" :key="index" class="box">
        <table style="width:100%">
          <tr>
            <td style="width:40mm;">
              <div>
                处方号:{{code}}
              </div>
              <img
                :src="hospital.logo"
                alt=""
                class="img"
                style="width:30mm;height:7mm;"
              />
            </td>
            <td style="text-align: center;" class="hid">
              <div class="hid" style="font-size:4mm;">{{hospital.name}}</div>
              <div style="margin-top: 1mm;">
                {{item.title}}【{{item.typeName}}】
              </div>
            </td>
            <td style="width:40mm;text-align: right;">
              <div style="text-align: right;">
                <span v-if="isChild">【{{professionalDeptName}}】</span>
                <span v-else>&nbsp;</span>
              </div>
              <img
                :src="barCode"
                alt=""
                class="rightImg"
                style="width:30mm;height:7mm;"
              />
            </td>
          </tr>
        </table>

        <div style="margin-top:2mm;">
          <table style="width: 100%;">
            <tr style="height:6mm;">
              <td>姓名：{{patientInfo.patientName}}</td>
              <td>性别：{{patientInfo.sex}}</td>
              <td>
                年龄：
                <span v-if="patientInfo.age>17">{{ patientInfo.age }}岁</span>
                <span v-else>
                  {{ patientInfo.birthday|toAge }}
                </span>
              </td>
            </tr>
            <tr style="height:6mm;">
              <td  v-if="patientInfo.age<18">体重：{{patientInfo.weight}}KG</td>
              <td>联系电话：{{patientInfo.phoneNumber}}</td>
              <td>科室：{{professionalDeptName}}</td>
            </tr>
            <tr style="height:6mm;">
              <td>费别：非医保</td>
              <td>档案号：{{patientInfo.archivesCode}}</td>
              <!-- <td>就诊卡号：{{patientInfo.medicalCardCode}}</td> -->
              <td>开单日期：{{time}}</td>
            </tr>
            <tr style="height:6mm;">
              <td colspan="3" style="border-top:0.1mm solid #000;">
                <div class="hid">
                  初步诊断：{{firstVisit}}
                </div>
              </td>
            </tr>
            <tr style="height:6mm;">
              <td colspan="3" style="border-top:0.1mm solid #000;">
                <div class="hid">
                  皮试结果：
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="nr">
          <div style="font-size:5mm;padding:2mm 0 2mm 0;">Rp</div>
          <table style="width:100%">
            <tr style="height:6mm">
              <td>组号</td>
              <td>药品名</td>
              <td>规格</td>
              <td>用法</td>
              <td>数量</td>
            </tr>
            <tr
              v-for="(item2,index2) in item.list"
              :key="index2"
              style="height:6mm"
            >
              <td>{{ item2.groupNo }}</td>
              <td>{{ item2.drugName }}</td>
              <td>{{item2.specs}}</td>
              <td>
                <span>每次</span>
                <span
                  >{{item2.oneDose}}{{toEnum(item2.oneDoseUnit,"unitEnum")
                  }}</span
                >
                <span>,{{toEnum(item2.use,"useEnum")}}</span>
                <span>,{{toEnum(item2.frequency,"frequencyEnum")}}</span>
                <!-- <span>,共{{item2.useDay}}天</span> -->
              </td>
              <td>
                {{ item2.useTotal }}{{toEnum(item2.totalUnit,"unitEnum")}}
              </td>
            </tr>
          </table>

          <hr style="border-style: dashed;border-bottom: none;" />
          <div>
            以下空白，本处方当日有效
          </div>
        </div>
        <div class="footer">
          <table style="width:100%">
            <tr style="height:6mm;">
              <td width="30%">审核：</td>
              <td>调配：</td>
              <td width="30%">医师：{{doctorName}}</td>
            </tr>
            <tr style="height:6mm;">
              <td colspan="2">核对、发药：</td>
              <td>药品金额：￥{{ item.sellMoney|todecimal }}</td>
            </tr>
          </table>
        </div>
      </div>
    </section>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          hospital: {},
          firstVisit: [],
          isChild: false,
          patientInfo: {},
          professionalDeptName: "",
          doctorName: "",
          barCode: "",
          time: "",
          enum: {},
          list: [],
          code: "",
          pageSize: 6, //每页打印数量
        },
        mounted() {
          var th = this;
          window.addEventListener("message", function(event) {
            var obj = event.data;
            th.hospital = obj.hospital;
            th.firstVisit = obj.firstVisit;
            th.patientInfo = obj.patientInfo;
            th.barCode = obj.barCode;
            th.time = obj.time;
            th.tableList = obj.drug;
            th.enum = obj.enum;
            th.isChild = obj.isChild;
            th.code = obj.code;
            th.professionalDeptName = obj.professionalDeptName;
            th.doctorName = obj.doctorName;
            th.list = [];
            if (obj.isOrdinary) {
              th.getPage(obj.drug, "处方笺", "西药");
            }
            //判断是否有输液单
            if (obj.isFlow) {
              th.getPage(obj.drug, "输液单", "西药");
            }
            if (obj.isHocus) {
              th.getPage(obj.drug, "麻醉单", "麻");
            }
            th.$nextTick(function() {
              th.isLoadImg();
            });
          });
        },
        methods: {
          todurgSpec(obj) {
            var th = this;
            if (!obj) return "";
            var fn = function(val) {
              var d = th.enum.unitEnum.find((d2) => {
                return d2.id == val;
              });
              if (d) {
                return d.desc;
              } else {
                return "";
              }
            };
            var str = `${obj.dose}${fn(obj.doseUnit)}*${obj.preparationNum}${fn(
              obj.preparationUnit
            )}`;
            return str;
          },
          toEnum(value, enumKey) {
            var th = this;
            var str = "";
            var data;
            var arr = th.enum[enumKey];
            for (var i = 0; i < arr.length; i++) {
              data = arr[i];
              if (data.id == value) {
                str = data.desc;
                break;
              }
            }
            if (data) {
              str = data.desc;
            }
            return str;
          },
          //解析处方单子
          getPage(array, title, typeName) {
            var th = this;
            var fn = function(groupArr) {
              var arr = [];
              var list = [];
              var sellMoney = 0;
              //如果是pageSize的倍数就第二页
              for (var index = 0; index < groupArr.length; index++) {
                var item = groupArr[index];
                var price = Number.parseFloat(item.sellMoney || 0);
                sellMoney += price * item.useTotal;
                arr.push(item);
                var i = index + 1;
                if (i % th.pageSize == 0) {
                  list.push({
                    sellMoney: sellMoney,
                    title: title,
                    list: arr,
                  });
                  arr = [];
                  sellMoney = 0;
                }
              }
              if (arr.length > 0) {
                list.push({
                  sellMoney: sellMoney,
                  title: title,
                  list: arr,
                  typeName: typeName,
                });
              }
              for (var index = 0; index < list.length; index++) {
                var element = list[index];
                th.list.push(element);
              }
            };
            // for (var index = 0; index < array.length; index++) {
            //   var element = array[index];
            //   fn(element.list);
            // }
            fn(array);
          },
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          },
        },
        filters: {
          todecimal(value) {
            let val = "0.00";
            if (value) {
              val = value.toFixed(2);
            }
            return val;
          },
          toFirstVisit(arr) {
            var str = "";
            if (typeof arr == "string") {
              return arr;
            }
            for (var index = 0; index < arr.length; index++) {
              var element = arr[index];
              if (str) {
                str += ";" + element.firstVist;
              } else {
                str = element.firstVist;
              }
            }
            return str;
          },
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          },
        },
      });
    </script>
  </body>
</html>
